body{
    font-size: x-large;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    display: grid;
    place-items: center;
    text-align: center; 
    background-image: url(spl.jpg); 
  }
  table {
    border-collapse: collapse;
  }
  
  td {
    place-content: center;
    width: 20px;
    height: 20px;
    border: 2.5px solid rgb(16, 16, 16);
    background-color: white;
  }
  
  input[type="number"] {
    width:350px;
    font-weight: bold;
    align-items: center;
    border: 2.5px solid rgb(16, 16, 16);
  }
  
  input[type="color"] {
    width: 50px;
    height: 25px;
  }
  #rows{
    border: 2.5px solid rgb(16, 16, 16);
  }
  #cols{
    border: 2.5px solid rgb(16, 16, 16);
  }
  button {
    width: 90px;
    height: 35px;  
    border: 2.5px solid rgb(16, 16, 16);
  }
  #create-grid{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: small;
  }
  #clear{  
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: medium;
    width: 75px;
    height: 40px;
    border: 2px solid rgb(8, 5, 18);
  }
  #color-picker {
    width: 75px;
    height: 40px;
    border: 2.5px solid rgb(8, 5, 18);
  }